<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Vip会员购买</title>
    <link rel="stylesheet" href="/static/css/vip.css" />
</head>
<body>
<div class="modal-vip">
    <div class="modal-vip-info">
        <div class="vip-info-top">
            欢迎您 <span>${user.userName!}</span>，&nbsp;
            您的可用现金 ￥<span>${userAccount.balance/100}</span>元&nbsp;
            <#if userVip??>
                您的 <span>VIP会员</span>
                <#if userVip.isExpired()>
                    <span style="font-weight: bold;color: red">已经过期</span>
                <#else >
                    有效期至 ${userVip.expireDate!}
                </#if>
            </#if>
        </div>
        <ul class="vip-info-lists">
            <#list memberSales as memberSale>
            <li data-id="${memberSale.id}" data-price="${memberSale.price}" <#if defaultMember.id == memberSale.id>class="recommend-item active"</#if>>
                <p class="vip-item_price">￥<span>${memberSale.price/100}</span>元 <del>(<i>${memberSale.price/100}元</i>)</del></p>
                <#if memberSale.price gt 0>
                    <p class="vip-item_coupon">限时特价</p>
                </#if>
                <p class="vip-item_intro">${memberSale.name!}</p>
                <div class="vip-item_line"></div>
                <div class="vip-item_desc">${memberSale.description!}</div>
            </li>
            </#list>
        </ul>
        <div class="vip-info-footer">
            <div class="pay-wrap">
                <div class="pay-money">应付金额 ￥<span id="current_price">${defaultMember.price/100}</span>元</div>
                <div class="pay-search" id="pay-use-weixin" style="display: none">
                    <div class="weixin-qrcode" id="qrcode-image">
                        <img src="" style="width: 138px;height: 138px;">
                    </div>
                    <div class="weixin-words"><img src="/static/images/icons/icon-wechat.png" alt=""><span>微信扫码支付</span></div>
                </div>
                <div class="pay-money-asset" id="pay-use-money" style="display: none">
                    <div class="asset-count">可用现金 ￥${userAccount.balance/100}元</div>
                    <a class="btn-pay-asset">现金账户支付</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/static/libs/layer/layer.js"></script>
<script type="text/javascript" src="/static/js/wxJSAPI.js"></script>
<script type="text/javascript" src="/static/libs/jquery/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="/static/js/order.js"></script>
<script type="text/javascript">
    var userId = ${user.userId};
    var userMoney = ${userAccount.balance};
    var thisId = ${defaultMember.id};
    var thisPrice = ${defaultMember.price};
    //选择开通类型
    $(document).ready(function () {
        if (userId <=0 ) {
            return parent.location.href = "/auth/login.html";
        }
        $('.vip-info-lists li').on('click', function () {
            var thisLi = $(this);
            thisLi.addClass('active').siblings().removeClass('active');
            thisPrice = parseInt(thisLi.data("price"));
            thisId = parseInt(thisLi.data("id"));
            initVipOrder();
        });
        $('.btn-pay-asset').on('click', function () {
            var params = {
                otherId: thisId,
                orderType: 'MEMBER',
                payType: 'ACCOUNT'
            };
            orderCreate(params);
        });
        initVipOrder();
    });

    function initVipOrder() {
        $('#current_price').text(thisPrice / 100);
        if (userMoney >= thisPrice) {
            $('#pay-use-money').css('display', 'block');
            $('#pay-use-weixin').css('display', 'none');
            //使用现金支付
        } else {
            //使用微信支付接口的
            $('#pay-use-money').css('display', 'none');
            $('#pay-use-weixin').css('display', 'block');
            var params = {
                otherId: thisId,
                payType: "WXPAY",
                orderType: 'MEMBER'
            };
            orderCreate(params);
        }
    }
</script>
</body>
</html>